<!--
 * @Author: JunyaoPan
 * @Date: 2021-07-05 11:07:46
 * @LastEditTime: 2021-07-05 11:13:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \staff-shixun2\src\views\Mine\Mine.vue
-->


<template>
 <!-- 我的 -->
  <div class="mine">
    <div class="head">
      <div class="ava">
        <van-image round width="6rem" height="6rem" :src="userFace" />
        <p class="Cname">{{ username }}</p>
      </div>
    </div>
    <div class="content">
      <div class="charge">
        <div class="left"></div>
        <div class="middle">
          <div class="money">
            <span>已完成</span>
            <span>待服务</span>
            <span>已支付</span>
            <span>账户余额</span>
          </div>
          <div class="data">
            <span>123</span>
            <span>2</span>
            <span>110</span>
            <span>{{balance}}</span>
          </div>
          <!-- <div class="money">
            <button class="btn-hover color-10" @click="recharge">充值</button>

            
          </div> -->
        </div>
        <div class="right"></div>
      </div>
      <div class="address">
        <van-cell title="实名认证" @click="toConfirm"> </van-cell>
        <van-cell title="提现" @click="recharge" />
        <van-cell title="收益信息" is-link to="Income" />
        <van-cell title="个人信息" is-link to="userinfo" />
      </div>
      <van-dialog v-model="show" title="提现" showCancelButton @confirm="confirm">
        <van-form @submit="confirm">
          <van-field
            v-model="money"
            name="金额"
            label="金额"
            placeholder="金额"
            :rules="[{ required: true, message: '请填写提现金额' }]"
          />
          
        </van-form>
      </van-dialog>
    </div>
    <div class="bottom">
      <div class="logout">
        <van-button class="btn-hover color-1" @click="Userlogout">
          退出登陆
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/http/axios";
import { mapState } from "vuex";
import {Toast} from 'vant'
export default {
  data() {
    return {
      username: "",
      balance: "",
      id: "",
      show: false,
      money: 10,
      userFace: "",
    };
  },
  computed: {
    ...mapState("user", ["token"]),
  },
  methods: {
    async getInfo() {
      let token = localStorage.getItem("token");
      // console.log(token);
      let res = await get("/user/info", { token: token });
      this.username = res.data.data.username;
      this.balance = res.data.data.balance;
      this.id = res.data.data.id;
      this.userFace = res.data.data.userFace;
      console.log(res);
      // console.log(token);
    },
    async Userlogout() {
      let res = await post("/user/logout");
      // console.log(res);
      if (res.status == 200) {
        this.$router.push({ path: "/login" });
      } else {
        this.$message.error(res.message);
      }
    },
    recharge() {
      this.show = true;
    },
    async confirm() {
      let data = {
        money: this.money,
        applyType: "提现",
        userId: this.id,
      };
      let res = await post("/accountApply/submitAccountApply", data);
      // console.log(res);
      if (res.status == 200) {
        Toast(res.data.message)
      } 
    },
    toConfirm(){
      this.$router.push({
        // 路径
        path:'/manager/userconfirm',
        // 参数的传递
        query:{
          id:this.id
        }
      })
    }
  },
  created() {
    this.getInfo();
  },
};
</script>

<style scoped>
.head {
  width: 100%;
  height: 220px;
  /* background: wheat; */
  background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}
.content {
  height: 400px;
  background-image: linear-gradient(to top, #fff7f0 0%, #fff1eb 100%);
}
.bottom {
  background: #fff7f0;
  height: 150px;
}
.logout button {
  margin-left: 23%;
}
.ava {
  margin-left: 39%;
  /* margin-top: 100px; */
  padding-top: 80px;
  height: 150px;
}
.ava p {
  margin-left: 12px;
  margin-bottom: 20px;
}
.charge {
  /* margin-top: 30px; */
  /* opacity: 0.9; */
  /* padding: 20px; */
  /* background: white; */
  height: 100px;
  /* border-radius: 5px;
  width: 500px; */
  display: flex;
  flex: 1;
}
.charge .left,
.right {
  flex: 0 0 30px;
  opacity: 0;
}
.charge .middle {
  flex: 1;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  box-shadow: 5px 5px 5px #ace0f9;
  /* justify-content: flex-start; */
}
/* .middle p,button{
    flex: 0 0 150px;
  } */
.money {
  flex-basis: 100%;
  display: flex;
  justify-content: space-evenly;
  margin: 10px;
}
.data {
  flex-basis: 100%;
  display: flex;
  justify-content: space-evenly;
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 20px;
  color: #1f586d;
  /* margin: 20px; */
  /* padding: 10px; */
}
span {
  margin: 8px;
}
.data span {
  margin: 8px;
}
.middle {
  display: flex;
  flex-wrap: wrap;
  /* align-content: space-between; */
}
.money:nth-child(2) {
  justify-content: center;
}
.btn-hover {
  width: 200px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  margin: 20px;
  height: 55px;
  text-align: center;
  border: none;
  background-size: 300% 100%;

  border-radius: 50px;
  /* moz-transition: all .4s ease-in-out; */
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.btn-hover:hover {
  background-position: 100% 0;
  /* moz-transition: all .4s ease-in-out; */
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.btn-hover:focus {
  outline: none;
}
/* .btn-hover.color-10 {
  background-image: linear-gradient(
    to right,
    #ed6ea0,
    #ec8c69,
    #f7186a,
    #fbb03b
  );
  box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
} */
.address {
  margin-top: 50px;
}
.btn-hover.color-1 {
  background-image: linear-gradient(
    to right,
    #ace0f9,
    #7af7e7,
    #8ffdc4,
    #befe98
  );
  box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}
.recharge_content {
  padding: 16px 16px 160px;
}
/*  */
</style>